<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div th:insert="publicHeader" ></div>
<script th:src="${#request.getContextPath()}+'/js/publicHeader.js'"></script>


<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">

    <div class="container">

        <div class="row">
            <div class="col-md-12">
                <p style="background-color: cornflowerblue ; color: white; font-size: 30px">图书销售排行榜</p>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6 col-md-4"  v-for="(book,index) in topNBooks">
                <div class="thumbnail">
                    <img th:src="${#request.getContextPath()}+'/img/1.jpg'" alt="..." class="col-sm-6 col-md-6">
                    <div class="caption text-left">
                        <p>排名:<span v-text="'NO.'+(index+1)"></span></p>
                        <p>书名:<span v-text="book.name"></span></p>
                        <p>价格:<span v-text="book.price"></span></p>
                        <p>
                            <a class="btn btn-primary" :href="'/book/selectBookById?id='+(book.id)">详情</a> &nbsp;&nbsp;&nbsp;&nbsp;
                            <a class="btn btn-success" href="">加入购物车</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>

<script>

    console.log(".........index...........")

    new Vue({
        el: "#app"
        ,
        data: {
            topNBooks:[]
        }
        ,
        methods: {
            initTopNBooks(){
                let _this=this
                $.get("/book/topNBooks?pageSize=9",function (data) {
                    console.log("initTopNBooks:this")
                    console.log(this)
                    console.log("initTopNBooks:_this")
                    console.log(_this)
                    _this.topNBooks=data;
                })
            }
        },
        created(){
            this.initTopNBooks()
        }

    });



</script>


<div th:insert="~{publicFooter::publicFooter}"></div>
<script th:src="${#request.getContextPath()}+'/js/publicFooter.js'"></script>



</body>
</html>